import * as React from 'react';
import axios from 'axios';
import copy from 'copy-to-clipboard';

import {render as renderAmis} from 'amis';
import {ToastComponent, AlertComponent, alert, confirm, toast} from 'amis-ui';
import {RouteComponentProps} from 'react-router';
import { getPageDetailApi } from '../api/riskservice';

// 定义路由参数类型
interface PageRouteParams {
  id: string;
}

class Page extends React.Component<RouteComponentProps<PageRouteParams>, { result: any }> {
  state = { result: null };

  async componentDidMount() {
    const { id } = this.props.match.params;
    try {
      const res = await getPageDetailApi(id);
      console.log('保存成功', res);
      const result = JSON.parse(res.data.schema);
      this.setState({ result });
    } catch (error) {
      console.error('请求出错:', error);
    }
  }

  render() {
    const { id } = this.props.match.params;
    let amisScoped;
    let theme = 'cxd';
    let locale = 'zh-CN';

    console.log('获取到的 id 参数:', id);
    console.log('获取到的 result 参数:', this.state.result);
    // 请勿使用 React.StrictMode，目前还不支持
    return ( 
      <div>
        <ToastComponent
          theme={theme}
          key="toast"
          position={'top-right'}
          locale={locale}
        />
        <AlertComponent theme={theme} key="alert" locale={locale} />
        {this.state.result ? 
          renderAmis(
            this.state.result,
            {
              // props...
              // locale: 'en-US' // 请参考「多语言」的文档
              // scopeRef: (ref: any) => (amisScoped = ref)  // 功能和前面 SDK 的 amisScoped 一样
            },
            {
              // 下面三个接口必须实现
              fetcher: ({
                url, // 接口地址
                method, // 请求方法 get、post、put、delete
                data, // 请求数据
                responseType,
                config, // 其他配置
                headers // 请求头
              }: any) => {
                config = config || {};
                config.withCredentials = true;
                responseType && (config.responseType = responseType);
  
                if (config.cancelExecutor) {
                  config.cancelToken = new (axios as any).CancelToken(
                    config.cancelExecutor
                  );
                }
  
                config.headers = headers || {};
  
                if (method !== 'post' && method !== 'put' && method !== 'patch') {
                  if (data) {
                    config.params = data;
                  }
  
                  return (axios as any)[method](url, config);
                } else if (data && data instanceof FormData) {
                  config.headers = config.headers || {};
                  config.headers['Content-Type'] = 'multipart/form-data';
                } else if (
                  data &&
                  typeof data !== 'string' &&
                  !(data instanceof Blob) &&
                  !(data instanceof ArrayBuffer)
                ) {
                  data = JSON.stringify(data);
                  config.headers = config.headers || {};
                  config.headers['Content-Type'] = 'application/json';
                }
  
                return (axios as any)[method](url, data, config);
              },
              isCancel: (value: any) => (axios as any).isCancel(value),
              copy: content => {
                copy(content);
                toast.success('内容已复制到粘贴板');
              },
              theme
            }
          ) : (
            <p>加载中...</p>
          )}
      </div>
    );
  }
}

 export default Page;